<template>
    <div class="email">
        <el-form 
        label-width="60px" 
        :rules="Rules" 
        :model="email" 
        size="large" 
        status-icon 
        ref="formRef"
        >
            <el-form-item label="邮箱" prop="name">
                <el-input v-model="email.name" />
            </el-form-item>

            <el-form-item label="密码" prop="password">
                 <el-input v-model="email.password" show-password />
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {reactive} from 'vue'
import {type FormRules,type ElForm, ElMessage} from 'element-plus'
import { type emailLoginRequest,emailLogin } from '../../../service/login/login'

// 1.定义数据
const email = reactive({
    name:'',
    password:''
})

// 2.定义校验规则
const Rules:FormRules = {
    name:[
        {required:true, message:'必须输入邮箱',trigger:'blur'},
        // {message:'',trigger:'change'}
    ],
    password:[
        {required:true, message:'必须输入密码',trigger:'blur'},
        // {pattern:/^[a-z0-9]{3,}$/,message:"密码必须3位以上",trigger:'change'}
    ]
}


// 3.暴露登入逻辑
const formRef = ref<InstanceType<typeof ElForm>>()

// 修改后的登录逻辑
//async 关键字：用于声明一个异步函数。异步函数会隐式返回一个 Promise 对象。
const loginAction = async () => {
  try {
    // await 关键字：用于等待一个 Promise 完成（resolve 或 reject）。
    // 它会暂停当前异步函数的执行，直到 Promise 完成。
    await formRef.value?.validate();
    //如果 formRef.value?.validate() 返回 Promise 且成功（resolve），则继续执行后续代码。
    //如果失败（reject），则抛出错误，由 catch 捕获。

    const emailLoginRequest:emailLoginRequest = {
      email: email.name,
      password: email.password
    };

    const res = await emailLogin(emailLoginRequest);
    console.log('响应数据:', res.data.access_token,res.data.user.uuid);
  } catch (err) {
    console.error('请求失败:', err);
    ElMessage.error("登录失败，请检查输入或稍后重试");
  }
};

// 导出这个函数
defineExpose({
    loginAction
})
</script>


<style lang="less" scoped>

</style>